<template>
	<view class="class">
		<view class="class_list">
			<view class="class_list_item" v-for="item in list" :key="item.classHoursId">
				<view class="class_list_item_cont">
					<view class="title">{{ item.courseName }}</view>

					<view class="startTime">
						<text class="item">教练：</text>
						<!-- <u-icon name="clock"></u-icon> -->
						<text>{{ item.coachName }}</text>
					</view>
					<view class="site">
						<text class="item">学习场景：</text>
						<text>{{ item.applicationStudents }}</text>
					</view>
					<view class="startTime">
						<text class="item">更新日期：</text>
						<!-- <u-icon name="clock"></u-icon> -->
						<text>{{ item.updatedTime }}</text>
					</view>
					<view class="startTime">
						<text class="item">地址：</text>
						<text>{{ item.courseAddress }}</text>
					</view>
					<view class="startTime">
						<text class="item">状态：</text>
						<text>{{ item.courseState | stateName }}</text>
					</view>
					<view class="startTime">
						<text class="item">金额：</text>
						<text>￥{{ item.fee }}</text>
					</view>
					<view class="u-page__button-item" v-if="item.courseState == 1 && item.isBuy != true"
						@click="placenOrder(item.courseId)">
						<u-button text="购买课程" size="small" type="primary"></u-button>
					</view>
				</view>
			</view>
		</view>

		<u-modal :show="show" :title="title" showCancelButton @confirm="confirm" @cancel="cancel">
			<view class="slot-content">
				<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
					<u-radio :customStyle="{ marginRight: '28px' }" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { courseList, buyCourse } from '../../../common/api'
import lxCalendar from '../../../components/lx-calendar/lx-calendar.vue'
export default {
	components: {
		lxCalendar,
	},
	data() {
		return {
			show: false,
			title: '请选择支付方式',
			list: [],
			userData: uni.getStorageSync('userData'), //获取用户信息
			radiolist1: [
				{
					name: '微信',
					disabled: false
				},
				{
					name: '支付宝',
					disabled: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '微信',
			courseId: null,
		}
	},
	filters: {
		stateName: function (value) {
			if (value == 0) {
				return '已开放报名'
			} else if (value == 1) {
				return '进行中'
			} else if (value == 2) {
				return '已满员'
			} else if (value == 3) {
				return '已取消'
			}
		}
	},
	onLoad(o) {
		this.getCourseList()

	},
	methods: {
		async getCourseList() {
			let res = await courseList(this.userData.user.traineeId)
			this.list = res
		},
		async onBuyCourse(id) {
			console.log(this.userData.user.traineeId, 3333);
			let params = {
				courseId: id,
				traineeId: this.userData.user.traineeId
			}
			let res = await buyCourse(params)
			uni.$u.toast('购买成功')
			this.getCourseList()
		},
		placenOrder(id){
			this.show = true
			this.courseId = id
			// this.confirm(id)
		},
		confirm() {
			console.log(1111);
			this.onBuyCourse(this.courseId)
			this.show = false
		},
		cancel() {
			console.log(222);

			this.show = false
		},
		groupChange(n) {
			console.log('groupChange', n);
		},
		radioChange(n) {
			console.log('radioChange', n);
		}
	}
}
</script>

<style lang="scss" scoped>
.class {
	::v-deep .u-modal__content {
		justify-content: normal;
		margin-top: 30rpx;
	}
	.add_button {
		margin: 32rpx;
		width: 200rpx;
	}

	.class_list {
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.class_list_item {
			width: 100%;
			margin-bottom: 32rpx;

			.class_list_item_cont {
				text-align: c;
				background: #f5f5f5;
				border-radius: 15rpx;
				padding: 20rpx;

				.title {
					font-size: $uni-font-size-medium;
					font-weight: bold;
					margin-bottom: 25rpx;
					text-align: center;
				}

				.site,
				.startTime,
				.endTime,
				.num,
				.state {
					display: flex;
					font-size: $uni-font-size-small;
					margin-bottom: 10rpx;

					.item {
						width: 180rpx;
					}

					text {
						margin-left: 10rpx;
						color: $uni-color-type1;
					}

					.style {
						color: #333;
						font-weight: bold;
					}

					.content {
						width: calc(100% - 180rpx);
					}
				}

				.u-page__button-item {
					margin-top: 32rpx;
				}
			}

			.describe {
				background: #f5f5f5;
				border-radius: 15rpx;
				padding: 20rpx;
				margin-top: 32rpx;

				.title {
					font-size: $uni-font-size-medium;
					font-weight: bold;
					padding-bottom: 20rpx;
				}

				.content {
					color: $uni-color-type1;
					font-size: $uni-font-size-small;
				}
			}
		}
	}
}
</style>
